<template>
	<el-dialog v-model="visible" title="明细 " :close-on-click-modal='false' :close-on-press-escape='false'
		:fullscreen='true'>
		<el-form :inline="true" :model="dataForm">
			<el-form-item>
				<el-button size="small" type="primary" @click="addOrUpdaCodelistteHandle(dataForm.id,dataForm.code)"
						   v-if="hasPermission('lswms:code:save')" >新增</el-button>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="danger" @click="deleteHandle()"
						   v-if="hasPermission('lswms:code:delete')" >删除</el-button>
			</el-form-item>
			<!--  <el-form-item>
                            <el-button type="info" @click="exportHandle()">导出</el-button>
                          </el-form-item> -->
		</el-form>
		<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
			@sort-change="dataListSortChangeHandle" style="width: 100%;">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="list" label="明细码" header-align="center" align="center"></el-table-column>
			<el-table-column prop="listname" label="代码明细名称" header-align="center" align="center"></el-table-column>
			<el-table-column prop="sort" label="排序" header-align="center" align="center"></el-table-column>
			<el-table-column prop="reserve1" label="备用字段1" header-align="center" align="center"></el-table-column>
			<el-table-column prop="reserve2" label="备用字段2" header-align="center" align="center"></el-table-column>
			<el-table-column prop="reserve3" label="备用字段3" header-align="center" align="center"></el-table-column>
			<el-table-column prop="reserve4" label="备用字段4" header-align="center" align="center"></el-table-column>
			<el-table-column prop="reserve5" label="备用字段5" header-align="center" align="center"></el-table-column>
			<el-table-column label='操作' fixed="right" header-align="center" align="center" width="150">
				<template #default="scope">
					<el-button type="text" size="small" @click="addOrUpdaCodelistteHandle(scope.row.id,scope.row.code)"
							   v-if="hasPermission('lswms:code:update')" >修改</el-button>
					<el-button type="text" size="small" @click="deleteHandle(scope.row.id)"
							   v-if="hasPermission('lswms:code:delete')" >删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
			layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
			@current-change="pageCurrentChangeHandle">
		</el-pagination>
		<!-- 弹窗, 新增 / 修改 -->
		<AddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate" @refresh-data-list="getDataList"></AddOrUpdate>


	</el-dialog>
</template>

<script>
	import DataList from "@/utils/DataList";
	import {
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue';
	import AddOrUpdate from "@/components/lswms/base/CodelistAddOrUpdate";

	import {hasPermission} from "@/utils/hasPermission"
	export default {
		name: "Code",

		components: {
			AddOrUpdate
		},

		setup() {
			const {
				dataForm,
				mixinViewModuleOptions,
				getDataList,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate
			} = DataList();

			// const dataForm = ref({
			// 				id:"",
			// 				code: ''
			// 			})
			onMounted(() => {
				mixinViewModuleOptions.value.getDataListIsPage = true;
				mixinViewModuleOptions.value.getDataListURL = '/lswms/codelist/page';
				mixinViewModuleOptions.value.deleteURL = '/lswms/codelist';
				mixinViewModuleOptions.value.deleteIsBatch = true
				dataForm.value = {
					id: "",
					code: ''
				}

				// if (mixinViewModuleOptions.value.activatedIsNeed) {
				//     getDataList();
				// }
			})
			const visible = ref(false);
			const init = () => {
				visible.value = true;
				nextTick(function() {


					//  dataFormRef.value.resetFields();
					// roleIdListDefault.value = [];
					if (dataForm.value.code) {
						dataForm.value.id = '';
						getDataList()
					}
					// Promise.all([
					//   getDeptList(),
					//   getRoleList()
					// ]).then(function () {
					//   if (dataForm.value.id) {
					//     getInfo();
					//   }
					// })
				})
			}
			// 新增 / 修改
			const addOrUpdaCodelistteHandle = (id, code) => {
				//
				addOrUpdateVisible.value = true;
				nextTick(function() {
					addOrUpdate.value.dataForm.id = id;
					addOrUpdate.value.dataForm.code = code;
					addOrUpdate.value.init();
				})
			}

			return {
				dataForm,
				mixinViewModuleOptions,
				getDataList,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate,
				visible,
				init,
				addOrUpdaCodelistteHandle
			}
		},
		methods:{
			hasPermission
		}


	}
</script>

<style scoped>

</style>
